<template>
	<div>
		<!-- 表单 -->
		<div class="app-container">
			<div class="w-full bg-[#4b8dffcc] h-10 border">
				<p class="pl-4 leading-10 font-bold text-[#fff]">{{ $t('machine.configs.subjectInfo')}}</p>
			</div>
			<div class="w-full flex flex-wrap pl-10 border p-4 mb-4 relative">
				<div class="w-1/3">
					<div class="mb-4 truncate">{{$t('goods.corner.activitName')}}: <span class="ml-4">{{ data.findList.c_name }}</span></div>
					<div class="mb-4 truncate">{{$t('marketing.preferential.code')}}: <span class="ml-4">{{ data.findList.code ?
						data.findList.code :'--'}}</span></div>
					<div class="mb-4 truncate">{{$t('marketing.preferential.type')}}: <span class="ml-4">{{ setType(data.findList) }}</span></div>
					<div class="mb-4 truncate">
						<span v-if="data.findList.c_type == 1">{{ $t('marketing.preferential.amount')}}:</span>
						<span v-else>{{$t('marketing.preferential.discounts')}}:</span>
						<span class="ml-4">{{ Number(data.findList.reduction).toFixed() }} 
							<span v-if="data.findList.c_type !== 1">%</span>
						</span>
					</div>
				</div>
				<div class="w-1/3">
					<div class="mb-4 truncate">{{$t('marketing.preferential.num')}}: <span class="ml-4">{{ data.findList.used_limit }}</span></div>
					<div class="mb-4 truncate">{{$t('marketing.preferential.minAmount')}}: <span class="ml-4">{{ data.findList.pay_limit }}</span></div>

					<div class="mb-4 truncate">{{$t('goods.groupM.designatedGood')}}:
						<span class="ml-4" v-if="data.findList.designated_goods == 1">{{ setGoods(data.findList) }}</span>
						<span class="ml-4 text-[#409EFF] cursor-pointer" v-else
							@click="toDetails(data.findList, 1)">{{ setGoods(data.findList) }}</span>
					</div>
					<div class="mb-4 truncate">{{$t('marketing.preferential.activityDesc')}}: <span class="ml-4">{{ data.findList.desc ? data.findList.desc : '--'
							}}</span></div>

				</div>
				<div class="w-1/3">
					<div class="mb-4 truncate">{{$t('marketing.preferential.state')}}: <span class="ml-4">{{ setActStatus(data.findList.status) }}</span>
					</div>
					<div class="mb-4 truncate">{{$t('date.activeDate')}}: <span class="ml-4">{{ getPlevel.gettime(data.findList.start_date,
							3)}}~{{ data.findList.end_date ? getPlevel.gettime(data.findList.end_date, 3) : $t('public.unlimited') }}</span>
					</div>
					<div class="mb-4 truncate">{{ $t('machine.type') }}:
						<span class="ml-4"
							v-if="data.findList.designated_machine == 1">{{ setMachine(data.findList) }}</span>
						<span class="ml-4 text-[#409EFF] cursor-pointer" v-else
							@click="toDetails(data.findList, 2)">{{ setMachine(data.findList) }}</span>
					</div>

				</div>
				<div class="absolute right-5 bottom-5">
					<el-button @click="modify(data.findList)">{{ $t('public.modify') }}</el-button>
				</div>
			</div>
			<div>
				<el-button @click="cancel">{{ $t('public.return') }}</el-button>
				<el-button v-prmis="'activity_coupon_exportUsedList'" type="primary" @click="getExport">{{$t('marketing.preferential.exportOrder')}}</el-button>
			</div>
		</div>
		<!-- 表格 -->
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" height="670" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column type="index" width="55" :label="$t('public.No')" />
				<el-table-column prop="c_id" :label="$t('marketing.preferential.coupon')" />
				<el-table-column prop="code" :label="$t('marketing.preferential.code')" show-overflow-tooltip />
				<el-table-column prop="trade_no" :label="$t('marketing.preferential.orderCode')" show-overflow-tooltip />
				<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip />>
				<el-table-column prop="c_type" :label="$t('marketing.preferential.type')" show-overflow-tooltip>
					<template #default="scope">
						{{ setType(scope.row) }}
					</template>
				</el-table-column>
				<el-table-column prop="reduction" :label="$t('marketing.preferential.deduction')" show-overflow-tooltip />
				<el-table-column :label="$t('public.state')" show-overflow-tooltip>
					<template #default="scope">
						{{ setStatus(scope.row) }}
					</template>
				</el-table-column>
				<el-table-column prop="create_time" :label="$t('date.createTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<PageNum :total="data.total" :page="data.order" @exposeData="current" @fraction="fraction" />
		</div>
		<el-dialog v-model="data.isDialog" :title="data.title" center :width="data.type == 'quantity' ? '30%' : '40%'"
			:class="data.type == 'quantity' ? '' : 'h-3/4 overflow-auto'">
			<machine :info="data.macgods" v-if="data.type == 'machine'" />
			<goods :info="data.macgods" v-if="data.type == 'goods'" />
		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false"/>
	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import PageNum from '@/components/PageNum/index.vue';
import { getcoupon_Used, exportUsedList, getFindCoupon } from '@/api/marketing'
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import getPlevel from '@/utils/level'
import machine from '../common/machine.vue';
import goods from '../common/goods.vue';
import exports from '@/components/export.vue';
const dialogExport = ref(false)
let router = useRouter()
let route = useRoute()
let data = reactive({
	macgods: [], // 弹窗设备/商品信息
	title: '', // 弹窗标题
	type: '', // 弹窗类型
	isDialog: false,
	mtloading: false, // 加载
	order: { // 传参
		c_id: null,
		page: 1,
		pageNum: 15
	},
	orderid: [], // 选中的订单
	total: 0, // 总条数
	list: [], // 列表信息
	objcet: {
		type: 3,
		file_path: ''
	},
	findList: {}
})
// 修改优惠券
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/marketing/preferential/details_info', query: query })
}
//取消
let cancel = () => {
	router.back()
}
let toDetails = (row: any, flag: number) => {
	data.isDialog = true
	if (flag == 2) {
		data.type = 'machine'
		data.title = $t('machine.marketing.Applicable')
		data.macgods = row.machineList
	} else {
		data.type = 'goods'
		data.title = $t('goods.corner.applica')
		data.macgods = row.goodsList
	}
}
let getFind = () => {
	let id = Number(route.query.id)
	getFindCoupon({ c_id: id }).then(res => {
		data.findList = res.data
	})
}
getFind()
// 处理优惠卷类型
let setType = (row) => {
	if (row.c_type == 1) {
		row.c_typeCn = $t('marketing.preferential.deduction')
	}
	if (row.c_type == 2) {
		row.c_typeCn = $t('marketing.preferential.discount')
	}
	return row.c_typeCn
}
let setMachine = (e) => {
	if (e.designated_machine == 1) {
		e.designated_machineCn = $t('machine.allMachin')
	}
	if (e.designated_machine == 2) {
		e.designated_machineCn = `${e.machineList.length}` + '台设备'
	}
	return e.designated_machineCn
}
let setGoods = (e) => {
	if (e.designated_goods == 1) {
		e.designated_goodsCn = $t('marketing.preferential.allGoods')
	}
	if (e.designated_goods == 2) {
		e.designated_goodsCn = `${e.goodsList.length}` + $t('marketing.preferential.goodsNum')
	}
	if (e.designated_goods == 3) {
		e.designated_goodsCn = `${e.goodsList.length}` + $t('marketing.preferential.except')
	}
	return e.designated_goodsCn
}
let setActStatus = (e) => {
	if (e == 1) {
		e = $t('goods.corner.not')
	}
	if (e == 2) {
		e = $t('goods.corner.progress')
	}
	if (e == 3) {
		e = $t('goods.corner.ended')
	}
	if (e == 4) {
		e = $t('marketing.guess.active')
	}
	return e
}
// 处理状态
let setStatus = (row: any) => {
	if (row.status == 1) {
		row.status = $t('public.waitingUse')
	}
	if (row.status == 2) {
		row.status = $t('public.used')
	}
	if (row.status == 3) {
		row.status = $t('public.expired')
	}
	if (row.status == 4) {
		row.status = $t('public.invalid')
	}
	return row.status
}
// 获取列表信息
let getData = () => {
	data.order.c_id = Number(route.query.id)
	getcoupon_Used(data.order).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 页数回调
let current = (e) => {
	data.order.page = e
	getData()
}

// 条数回调
let fraction = (e) => {
	data.order.pageNum = e
	getData()
}
// 导出
let getExport = () => {
	let obj = {
		c_id: Number(route.query.id)
	}
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportUsedList(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	}).catch(err => {
		console.log('取消')
	})
}
getData()
</script>
